<template>
  <div class="main">
    <div class="main_header">
      <h2>用户列表</h2>
      <el-button type="primary">Primary</el-button>
    </div>
    <el-table :border="true" :data="tableData" style="width: 100%">
      <el-table-column label="序号" align="center" >
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="用户名" align="center">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.username }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="手机号" align="center">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.mobile }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="邮箱" align="center">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.email }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="性别" align="center">
        <template #default="scope">
              <div style="display: flex; align-items: center; justify-content: center;">
              <!-- <el-tag class="ml-2" :type="scope.row.gender == 1 ? '' : 'success'">
                {{ scope.row.gender == 1 ? '男' : '女' }}
              </el-tag> -->
              <el-tag class="ml-2" :type="scope.row.gender == 1 ? '' : 'success'">
                {{ scope.row.gender == 1 ? '男' : '女'  }}
                <!-- {{ if(type == 'success'){
                    if(scope.row.gender == 2){
                      '女'
                  }else{
                    '保密'
                  }
                } 
                }} -->
                <!-- {{ type == 'success' ? scope.row.gender == 2 ? '女' : '保密'  }} -->
              </el-tag>
        </div>
        </template>
      </el-table-column>

      <el-table-column label="状态" align="center">
         <template #default="scope">
              <div style="display: flex; align-items: center; justify-content: center;">
              <el-tag class="ml-2" :type="scope.row.status == 1 ? 'success' : 'danger'">{{
              scope.row.status == 1 ? '启用' : '禁用'
            }}</el-tag>
        </div>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="fen">
      <el-pagination 
      background 
      layout="prev, pager, next" 
      :total="total" 
      v-model:current-page="page"
      @current-change="setcurrentFn"
       />
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
// 导入接口
import{getUserData} from '../../../api/user'
// 定义当前页码
const page = ref(1)
// 定义表格数据
const tableData = ref()
// 定义总条数
const total = ref(0)

// 封装用户接口获取用户列表
const getUserdataFn = () =>{
  // 调用用户接口获取用户列表
  getUserData({page}).then((res)=>{
    console.log(res);
    tableData.value = res.data.paginate.data
    console.log('tableData.value',tableData.value);
    total.value = res.data.paginate.total
  })
}
// 重新渲染数据
getUserdataFn()


const handleEdit = (index, row) => {
  // console.log(index, row)
}
const handleDelete = (index, row) => {
  // console.log(index, row)
}


</script>
<style lang='scss' scoped>
  .main{
    width: 100%;
    height: 100%;
    background-color: white;
    box-sizing: border-box;
    .main_header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 1px solid #bdc3c7;
      height: 80px;
      padding: 0 20px;
      h2{
        font-size: 22px;
      }
    }
    .fen{
      width: 100%;
      padding: 10px 20px 10px 0;
      display: flex;
      justify-content: right;
      box-sizing: border-box;
    }
  }
</style>